<script setup>
const appTitle = import.meta.env.VITE_APP_TITLE
// 获取当前路由
const route = useRoute()
const router = useRouter()

// 获取所有需要 keepAlive 的页面组件名（name 字段要定义好）
const keepAlivePages = computed(() => {
  return router
    .getRoutes() // 获取所有已注册路由
    .filter(route => route.meta?.keepAlive) // 过滤需要缓存的
    .map(route => route?.name) // 提取组件名
    .filter(name => !!name) // 过滤无效值
})

// 动态内容区 class，根据是否有 Tabbar 决定是否加底部安全距离
const contentClass = computed(() =>
  !route.meta?.hideTabbar ? 'min-h-screen pb-[50px] pt-[46px] pb-safe' : 'min-h-screen'
)
</script>

<template>
  <router-view v-slot="{ Component, route }">
    <BaseNavBar
      v-if="route.meta?.showNavBar"
      :title="route.meta?.title || appTitle"
      :showBack="false"
    />
    <div :class="contentClass">
      <transition name="fade" mode="out-in">
        <keep-alive :include="keepAlivePages">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </div>
    <Tabbar v-if="!route.meta?.hideTabbar" />
  </router-view>
</template>
